<template>
  <div class="home">
    <div class="block text-center">
      <el-carousel height="750px">
        <el-carousel-item v-for="(item, index) in arrImages" :key="index">
          <img :src="item" :alt="'图片' + index" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle">
      <div class="u3">
        <div class="u1">
          <p>救助不是一个人的全力以赴，而是绝大多数人的力所能及</p>
          <p class="u2">
            民间动物救助基地以及相关公益组织无法满足不断增加的收容需求
          </p>
          <p
            class="u2"
            style="border-bottom: 1px solid; width: 80%; margin-top: 20px"
          ></p>
          <div class="left">
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">
                2021年流浪猫数量高达5300万只，流浪狗数量高达4000万只
              </div>
            </div>
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">
                每年冬天有一半以上的流浪猫/狗，永远地离开了这个世界
              </div>
            </div>
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">
                流浪动物生存环境恶劣，面临食物短缺、恶意捕杀、虐待等威胁
              </div>
            </div>
            <div class="btn">
              <el-button class="el-btn" @click="handleSelect('login','login')">开始拯救毛茸茸</el-button>
            </div>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/images/首页/u152.png" alt="" />
        </div>
      </div>
    </div>
    <div class="middle middle2">
      <div class="u3" style="padding: 50px 0">
        <div class="right">
          <img src="../../assets/images/首页/u166.png" alt="" />
        </div>
        <div class="u1">
          <p>领养不是一时兴起，是一份责任，是真心换真心</p>
          <p class="u2">全球共有数亿只流浪动物，但得到领养的比例不足百分之二</p>
          <p
            class="u2"
            style="border-bottom: 1px solid; width: 80%; margin-top: 20px"
          ></p>
          <div class="left">
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">经济独立，有稳定住所及工作</div>
            </div>
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">阳台封窗，不笼养，不散养</div>
            </div>
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">科学喂养，适龄绝育，定期驱虫、打疫苗</div>
            </div>
            <div style="display: flex; margin-bottom: 20px">
              <div>
                <img
                  class="img"
                  src="../../assets/images/首页/u149.png"
                  alt=""
                />
              </div>
              <div class="content">
                不以结婚、怀孕、搬家、宠物生病等任何理由弃养
              </div>
            </div>
            <div class="btn">
              <el-button class="el-btn">选择领养</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle3">
      <div class="p1">也曾有一份体贴，慰我饥肠辘辘</div>
      <div class="p1">“我可以相信你吗”</div>
      <div class="p2">
        <img src="../../assets/images/首页/u187.png" alt="" />
      </div>
    </div>
    <div class="middle4">
      <img style="width: 100%" src="../../assets/images/首页/u0.png" alt="" />
      <div class="content">
        <div class="p">用行动改变流浪动物的命运</div>
        <div class="btn" style="text-align: center">
          <el-button class="el-btn" @click="handleSelect('login','login')">开始拯救毛茸茸</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import u5 from '@/assets/images/首页/u5.png';
import u6 from '@/assets/images/首页/u6.png';
import u7 from '@/assets/images/首页/u7.png';

const router = useRouter();

const handleSelect = (key, keyPath) => {
  router.push({ name: key });
};
const arrImages = [u5, u6, u7];
</script>

<style lang="less" scoped>
.middle {
  margin-top: 50px;
  padding: 0 200px;
  .u1 {
    font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: #3a3838;
  }
  .u2 {
    font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #b3b5b6;
  }
  .u3 {
    margin-top: 50px;
    display: flex;
    .left {
      width: 100%;
      font-size: 20px;
      .img {
        height: 20px;
        width: 20px;
        margin-top: 6px;
      }
      .content {
        margin-left: 20px;
      }
      .btn {
        margin-top: 40px;
        height: 68px;
        width: 100%;
      }
      .el-btn {
        height: 50px;
        width: 200px;
        border-radius: 90px;
        color: black;
        font-size: 18px;
        border-color: #16b78e;
      }
      .el-btn:hover {
        background-color: #16b78e;
        color: white;
      }
    }
    .right {
      width: 50%;
      margin-top: 7%;
      img {
        width: 455px;
        height: 267px;
      }
    }
  }
}
.middle2 {
  margin-top: 100px;
  background-color: #f6f7f8;
}
.middle3 {
  margin-top: 70px;
  padding: 0px 150px;
  .p1 {
    font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: #3a3838;
    text-align: center;
  }
  .p2 {
    margin-top: 40px;
    img {
      width: 100%;
    }
  }
}
.middle4 {
  margin-top: 20px;
  position: relative;
  img {
    width: 100%;
  }
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .p {
      font-size: 40px;
      color: white;
    }
    .btn {
      margin-top: 40px;
      height: 68px;
      width: 100%;
    }
    .el-btn {
      height: 50px;
      width: 200px;
      border-radius: 90px;
      color: #16b78e;
      font-size: 18px;
      border-color: #16b78e;
    }
    .el-btn:hover {
      background-color: #16b78e;
      color: white;
    }
  }
}
.home {
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item img {
  width: 100vw;
  height: auto;
  object-fit: contain; /* 或者 object-fit: cover; */
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}
</style>
